@import 'antd/es/style/themes/default.less';
.login {
  position: relative;

  width: 100%;
  min-width: 1420px;
  min-height: 100vh;
  padding-left: 40%;
  background: url('@img/login-bg.png') no-repeat center;
  background-size: cover;
}

.login-content {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  padding: calc(50vh - 384px + 120px) 0 120px 0;
}

.login-content__footer {
  position: absolute;
  bottom: 0;
  left: 0;

  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;

  width: 100%;
  height: 48px;
  padding: 0 48px;
  span {
    color: #bbbdc4;
  }
}

.login-content__block {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100%;
}

.login-content__form {
  width: 540px;
  padding: 64px;
  background-color: #fff;
  border-radius: 16px;
}

.white-space {
  height: 24px;
}

.mobile-block {
  position: relative;

  padding-left: 104px;

  border: 1px solid #dedfe2;
  border-radius: @border-radius-base;
}

.zone-block {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;

  box-sizing: border-box;
  width: 100px;
  height: 48px;
  padding-right: 24px;
  &::after {
    position: absolute;
    top: 50%;
    right: 0;

    width: 1px;
    height: 24px;
    margin-top: -8px;

    content: '';

    background: @grey-2;
  }
}

.zone-block-arrow {
  position: absolute;
  top: 0;
  right: 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 100%;

  cursor: pointer;
}

.zone-input {
  font-size: @heading-4-size;

  width: 100%;
  height: 48px;
  padding: 0;

  text-align: center;

  color: @text-color;
  border: 0;
  border-radius: @border-radius-base;
  outline: none;
}

.mobile-input {
  font-size: @heading-4-size;

  width: 100%;
  height: 48px;
  padding: 0 16px;

  color: @text-color;
  border: 0;
  border-radius: @border-radius-base;
  background: @component-background;
}

.input-clear-btn {
  font-size: @font-size-lg;

  position: absolute;
  top: 0;
  right: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 48px;

  cursor: pointer;
  user-select: none;
}

.input-notice {
  font-size: @font-size-base;
  line-height: @line-height-base;

  padding: 0 8px;

  color: @error-color;
}

.input-notice-text {
  margin-left: 8px;
}

.verification-block {
  height: 48px;
}

.verification-input {
  position: relative;

  float: left;

  width: 258px;

  border: 1px solid #dedfe2;
  border-radius: 4px;
  > input {
    font-size: @heading-4-size;

    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 16px;

    color: @heading-color;
    border: 0;
    border-radius: 16px;
  }
}

.password-block {
  position: relative;

  border: 1px solid @border-color-split;
  border-radius: @border-radius-base;
  > input {
    font-size: @heading-4-size;

    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 16px 0 48px;

    color: @heading-color;
    border: 0;
    border-radius: 16px;
  }
}

.password-icon {
  position: absolute;
  top: 0;
  width: 48px;
  height: 48px;
  font-size: 24px;
  text-align: center;
  line-height: 48px;
}

.sms-btn {
  display: flex;
  float: right;
  align-items: center;
  justify-content: center;

  width: 136px;
  height: 50px;

  cursor: pointer;
  user-select: none;

  border: 1px solid @border-color-split;
  border-radius: @border-radius-base;
  &.disable {
    background-color: @disabled-bg;
  }
}

.sms-btn-text {
  font-size: @heading-4-size;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  color: @heading-color;
}

.sms-time-text {
  font-size: @heading-4-size;

  color: @disabled-color;
}

.login-toggle-type {
  font-size: @font-size-lg;

  margin-bottom: 24px;

  user-select: none;

  color: @primary-6;
  > span {
    cursor: pointer;
  }
}

.protocol-block {
  position: relative;

  padding-left: 32px;

  > span {
    font-size: @font-size-lg;

    cursor: pointer;

    color: @text-color-secondary;
  }
}

.protocol-checkbox {
  position: absolute;
  top: 0;
  left: 0;
}

.protocol-link {
  color: @link-color;
}

.btn-line {
  margin-top: 16px;
}

.login-btn {
  font-size: @heading-4-size;

  height: 48px;

  border-radius: @border-radius-base;
}


.zone-tel-search {
  margin-bottom: 8px;
}

.zone-list {
  overflow: auto;

  width: 400px;
  height: 304px;
  li {
    font-size: @font-size-base;
    line-height: @line-height-base;

    cursor: pointer;
  }
}

.zone-tel {
  display: inline-block;

  width: 72px;
}


.title-line {
  height: 40px;
  line-height: 40px;
  font-size: 0;
  font-family: 宋体;
  color: #d9432f;
  margin-bottom: 24px;
  font-weight: bold;
  text-align: center;
  &::before {
    content: '';
    display: inline-block;
    height: 40px;
    vertical-align: middle;
  }
}
.title-line-sub {
  text-align: center;
  margin-bottom: 24px;
  color: #999;
}
.logo {
  height: 40px;
  margin-right: 8px;
  vertical-align: middle;
}
.title-line-text {
  font-size: 26px;
  vertical-align: middle;
}
.foot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  padding: 0 48px;
  text-align: center;
  span {
    color: #999;
  }
}